<template>
  <view class="record">
    <view class="balance flex-align-center" v-if="balance.length > 0">
      <view v-for="item in balance" :key="item.value" class="balance-item">
        <view
          ><text class="unit">￥</text
          ><text class="price">{{ item.value | formatCurrency }}</text></view
        >
        <view class="label">{{ item.label }}</view>
      </view>
    </view>
    <scroll-view
      v-if="list.length > 0"
      scroll-y
      class="record-list"
      @scrolltolower="handleScrollToLower"
      :style="{
        height: `calc(100vh - 20rpx - 20rpx - ${balanceHeight}px)`,
      }"
    >
      <view
        v-for="item in list"
        :key="item.id"
        class="item flex-align-center"
        @click="
          $Router.push({
            name: 'memberBalanceRecordDetail',
            params: {
              recordId: item.id,
            },
          })
        "
      >
        <view class="sales">
          <view class="label">{{ item.recordType | filterRecordType }}</view>
          <view class="createTime">{{ item.createTime }}</view>
        </view>
        <view
          class="payFee"
          :style="{ color: item.balanceFee > 0 ? '#ffb72f' : 'black' }"
        >
          <text v-if="item.balanceFee > 0">+</text
          >{{ item.balanceFee | formatCurrency }}</view
        >
      </view>
    </scroll-view>
    <view v-else class="empty flex-align-center flex-justify-content-center">
      <list-empty />
    </view>
  </view>
</template>

<script>
import {
  getBalanceRecordList,
  getCustomerBalance,
} from "@/service/api/sp-common/member";
import listEmpty from "@/components/baseComponents/list-enpty";
import { BALANCE_TYPE, RECORD_TYPE } from "@/pages/sp-store/const/member";

export default {
  name: "index",
  components: { listEmpty },
  data() {
    return {
      params: {
        pubDomainBusinessId: "",
        pageNum: 1,
        pageSize: 10,
      },
      options: null,
      list: [],
      hasNextPage: false,
      balance: [],
      balanceHeight: 0,
    };
  },
  computed: {
    themeColor({ $theme }) {
      return $theme.themeColor.primary;
    },
  },
  filters: {
    filterRecordType(type) {
      return RECORD_TYPE[Number(type)];
    },
  },
  onLoad(options) {
    this.params.pubDomainBusinessId = options?.pubDomainBusinessId;
    this.$nextTick(() => {
      this.innit(true);
      this.handleGetBalance();
    });
    this.options = options;
  },
  methods: {
    uGetRect(selector, all) {
      return new Promise((resolve) => {
        uni
          .createSelectorQuery()
          .in(this)
          [all ? "selectAll" : "select"](selector)
          .boundingClientRect((rect) => {
            if (all && Array.isArray(rect) && rect.length) {
              resolve(rect);
            }
            if (!all && rect) {
              resolve(rect);
            }
          })
          .exec();
      });
    },
    async innit(isClear = false) {
      const { list, hasNextPage } = await getBalanceRecordList({
        ...this.params,
      });
      if (list) {
        this.list = isClear ? list : [...this.list, ...list];
        this.hasNextPage = hasNextPage;
      }
    },
    async handleGetBalance() {
      const data = await getCustomerBalance({
        pubDomainBusinessId: this.options?.pubDomainBusinessId,
      });
      for (const dataKey in data) {
        if (BALANCE_TYPE?.hasOwnProperty(dataKey)) {
          const obj = {
            label: BALANCE_TYPE[dataKey],
            value: data[dataKey],
          };
          this.balance.push(obj);
        }
      }

      this.$nextTick(() => {
        this.handleGetBalanceHeight();
      });
    },
    handleGetBalanceHeight() {
      this.uGetRect(".balance").then((res) => {
        this.balanceHeight = res?.height;
      });
    },
    handleScrollToLower() {
      console.log("触底");
      this.params.pageNum = this.params.pageNum + 1;
      this.$nextTick(() => {
        this.innit();
      });
    },
  },
};
</script>

<style scoped lang="scss">
$width: 710rpx;
$defaultColor: #ffb72f;
.card {
  width: $width;
  border-radius: 8rpx;
  background-color: white;
}
.empty {
  height: 100vh;
}
.record {
  background-color: #f7f7f7;
  padding-top: 20rpx;
  &-list {
    @extend .card;
    margin: 0 auto;
    overflow: hidden;
    .item {
      padding: 30rpx 27rpx;
      border-bottom: 1rpx solid #f7f7f7;
      .sales {
        flex: 1;
        .createTime {
          margin-top: 10rpx;
          color: #888888;
          font-size: 24rpx;
        }
        .label {
          font-size: 28rpx;
        }
      }
      .payFee {
        text-align: right;
      }
    }
  }
}
.balance {
  @extend .card;
  margin: 0 auto 20rpx auto;
  padding: 40rpx 0;
  &-item {
    text-align: center;
    flex: 1;
  }
  .price {
    font-size: 36rpx;
    font-weight: bold;
  }
  .unit {
    font-size: 24rpx;
  }
  .label {
    margin-top: 17rpx;
    color: #888888;
    font-size: 27rpx;
  }
}
</style>
